
<template>
<view style="background:#f5f5f5" v-if="isLogin">

    <view class="beauty-tab-wrap">
            <view class="beauty-tab">
                  <view @tap="tab('null')"  :class="[state == 'null'?'on':'']">全部</view>
                  <view @tap="tab('1')" :class="[state == '1'?'on':'']">待付款</view>
                  <view @tap="tab('0')" :class="[state == '0'?'on':'']">已付款</view>
                  <view @tap="tab('2')" :class="[state == '2'?'on':'']">已取消</view> 
            </view>
          </view>
    <scroll-view 
    style="height:calc(100vh - 88rpx)"
        class="scroll-y" 
        scroll-y
        refresher-enabled="true"
        @refresherrefresh="onRefresh"
        :refresher-triggered="triggered"
        @scrolltolower="scrolltolower">


      

          <view class="beauty-order-list"  >


         


                <view class="content">
                      <Card v-for="(item,index) in list" :key="index" :d="item" />
                      <PageBottom :LoadingType="loadingType" noMoreStr="抱歉,没有更多订单" noDataStr="抱歉,暂时没有订单"/>
                </view>
                 

                        <view class="beauty-more" v-if="loadingType != 'none' ">
                    <view class="customize-title">
                            <view class="customize-title-group">
                                <image src="/static/images/art-title-left-icon.png" class="customize-title-icon" />
                                <view class="customize-title-name">推荐商品</view>
                                <image src="/static/images/art-title-right-icon.png" class="customize-title-icon" />
                            </view>
                    </view>
                    <view >
                        <BeautyCard class="beautycard" v-for="(item,index) in recommends" :key="index"  :d="item"/>
                    
                
                    </view>
         </view>


          </view>  
        

  
      
    </scroll-view>   
    
</view> 
</template>

<script lang="ts">

  import {postSelertbeiye,postPickOfTheWeek} from '@/request/actions';
  import Card from './_components/card.vue'
  import PageBottom from '@components/pageBottom/index.vue'
  import {Vue, Component, Prop} from 'vue-property-decorator';
  import BeautyCard from '@components/beautyCard/index.vue';


//1 美容院 2个人
 
  const LIMIT =  8;
  
  
  @Component({
    components:{
      Card,
      PageBottom,
      BeautyCard
    }
  })
  export default  class extends Vue{
  
      state:any = 'null';
      list:Array<any> = [];
      loadingType:string|number = 'none';
      isLogin:boolean = true;
      triggered:boolean = false;
      limit:number = 10;
      page:number = 1;
      bStop:boolean = true;
      LoadPage:boolean= true;
      recommends:Array<any> = [];
   
       HttpSelertbeiye(arr:Array<any> = []){
            let state = this.state == 'null'?null:this.state;
            let page = this.page;
            let limit = this.limit;     
            let globalData = getApp().globalData;
            let orderState = globalData.userOrderState;
            let list:Array<any> = arr;


            let { userId:userid } = globalData.userInfo;

              uni.showLoading();
            
              postSelertbeiye({userid,page,limit,stateid:state}).then((r:any)=>{

                    let {data:res} = r;
                  
                    let res_data = res.data.records;
  
                    if(res.status == 200){
                        list.push(...res_data);

                        this.list = list;

                        if(res.data.total == 0){
                            this.loadingType = 0;
                        }else if(res.data.total == this.list.length){
                            this.loadingType = 1;

                        }
                        
                    }
                    this.bStop = res.data.records.length < limit ?  false : true;
                    this.triggered = false;
                    uni.hideLoading();
                   
            })
              
          }

        tab(id:any){
            this.state = id;
            this.list = [];
            this.page = 1;
            this.bStop = true;
            this.HttpSelertbeiye(); 
        
        }

          scrolltolower(){
               this.page++;
          
               if(!this.bStop) return;
               this.limit = LIMIT;
              
               this.HttpSelertbeiye(this.list); 
          }

           onRefresh(){
               let globalData = getApp().globalData;
               this.triggered = true;
               this.isLogin = Boolean(Object.keys(globalData.userInfo).length);
            
            
            if( this.isLogin){
                
              this.limit = this.list.length <= LIMIT?LIMIT:this.list.length;
              this.page = 1;
              this.bStop = true;
              this.HttpSelertbeiye();  
            
          }

            
          }
    
    onLoad(query:any){
      
    
      console.log(query)
      let {id} = query;
      if(id){
        this.state = id;
      }
    
      postPickOfTheWeek().then((r:any)=>{
         let {data:res} = r;
         if(res.status == 200){
           this.recommends = res.data.stulist;
         }
      })
    }


    onShow(){

        let globalData = getApp().globalData;
        this.isLogin = Boolean(Object.keys(globalData.userInfo).length);
       

        if( this.isLogin){
          this.limit = this.list.length <= LIMIT?LIMIT:this.list.length;
          this.page = 1;
          this.bStop = true;
          this.HttpSelertbeiye();  
         
      }
       

       

    }


      onTabItemTap(){
          let globalData = getApp().globalData;
        this.isLogin = Boolean(Object.keys(globalData.userInfo).length);
        if(!this.isLogin){
              uni.showModal({
                content:"请先登陆",
                success: (res:any)=> {
                    if (res.confirm) {
                        return  uni.navigateTo({
                                url: `/pages/login/index`
                            });
                    }
                }
              })
        }
    }
   


  }
</script>
<style lang="scss">

@import './_static/scss/index.scss';
</style>